<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="mask"></div>
    <div class="content">
        <div class="card">
            <div class="front card-content">
                <div class="info">
                    <div class="head-sculpture">
                        <img src="./asset/head-sculpture.jpg" alt="head-sculpture">
                    </div>
                    <div class="rief-introduction">
                        <span class="name">MAOS</span>
                        <span class="introduction">"Hello, I'm White Cat"</span>
                    </div>
                </div>
                <button class="front-btn btn">See More</button>
            </div>
            <div class="opposite card-content">
                <div class="info">
                    <div class="head-sculpture">
                        <img src="./asset/head-sculpture.jpg" alt="head-sculpture">
                    </div>
                    <div class="rief-introduction">
                        <span class="name">MAOS</span>
                        <ul class="other-introduction">
                            <li class="other-introduction-item">
                                <span class="introduction-name">like</span>:
                                <span class="introduction-detail">One click triple connection,Follow with
                                    interest</span>
                            </li>
                            <li class="other-introduction-item">
                                <span class="introduction-name">label</span>:
                                <span class="introduction-detail">Front end white,Cat,Developer</span>
                            </li>
                            <li class="other-introduction-item">
                                <span class="introduction-name">contact</span>:
                                <span class="introduction-detail">
                                    <svg t="1694866106677" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4025" width="128" height="128">
                                        <path
                                            d="M306.005333 117.632L444.330667 256h135.296l138.368-138.325333a42.666667 42.666667 0 0 1 60.373333 60.373333L700.330667 256H789.333333A149.333333 149.333333 0 0 1 938.666667 405.333333v341.333334a149.333333 149.333333 0 0 1-149.333334 149.333333h-554.666666A149.333333 149.333333 0 0 1 85.333333 746.666667v-341.333334A149.333333 149.333333 0 0 1 234.666667 256h88.96L245.632 177.962667a42.666667 42.666667 0 0 1 60.373333-60.373334zM789.333333 341.333333h-554.666666a64 64 0 0 0-63.701334 57.856L170.666667 405.333333v341.333334a64 64 0 0 0 57.856 63.701333L234.666667 810.666667h554.666666a64 64 0 0 0 63.701334-57.856L853.333333 746.666667v-341.333334A64 64 0 0 0 789.333333 341.333333zM341.333333 469.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666666-42.666667z m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-85.333333 0v-85.333333a42.666667 42.666667 0 0 1 42.666667-42.666667z"
                                            p-id="4026"></path>
                                    </svg>
                                    <svg t="1694866128111" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4997" width="128" height="128">
                                        <path
                                            d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
                                            p-id="4998"></path>
                                    </svg>
                                    <svg t="1694866144192" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="6881" width="128" height="128">
                                        <path
                                            d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z"
                                            fill="#2c2c2c" p-id="6882"></path>
                                    </svg>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <button class="opposite-btn btn">See More</button>
            </div>
        </div>
    </div>
    <script>
        const frontBtn = document.querySelector('.front-btn')
        const oppositeBtn = document.querySelector('.opposite-btn')
        const card = document.querySelector('.card')
        const front = document.querySelector('.front')
        const opposite = document.querySelector('.opposite')
        frontBtn.addEventListener('click', function() {
            card.className ='card flip-left'
            opposite.style.opacity = '1'
            front.style.opacity = '0'
            opposite.style.zIndex = '1'
            front.style.zIndex = '-1'
            opposite.style.transform = 'rotateY(180deg)'
        })
        oppositeBtn.addEventListener('click', function() {
            card.className = 'card flip-right'
            opposite.style.opacity = '0'
            front.style.opacity = '1'
            opposite.style.zIndex = '-1'
            front.style.zIndex = '1'
            front.style.transform = 'rotateY(180deg)'
        })
    </script>
</body>

</html>